Angular Material Slide Toggle কম্পোনেন্ট একটি বেসিক টগল সুইচ প্রদান করে, যা সাধারণত কোনো বাইনরি অপশন (যেমন চালু/বন্ধ) পরিবর্তন করতে ব্যবহৃত হয়। এটি Material Design এর একটি অংশ এবং ব্যবহারকারীদের জন্য একটি সুন্দর এবং সহজে ইন্টারঅ্যাক্টিভ টগল সুইচ তৈরি করতে সাহায্য করে।

এটি অনেক ধরনের অ্যাপ্লিকেশন এবং সেটিংসে ব্যবহৃত হয়, যেমন অথরাইজেশন সিস্টেমে, নোটিফিকেশন সেটিংস, ডার্ক মোড/লাইট মোড স্যুইচ, এবং আরও অনেক কিছু।

MatSlideToggle কম্পোনেন্ট ব্যবহার

MatSlideToggle কম্পোনেন্ট দিয়ে আপনি একটি স্লাইড সুইচ তৈরি করতে পারেন, যা খুবই সাধারণভাবে টগল ফাংশনালিটি প্রদান করে। নিচে এর একটি বেসিক উদাহরণ দেওয়া হলো:

<mat-slide-toggle [(ngModel)]="isChecked">Toggle Option</mat-slide-toggle>

এখানে, [(ngModel)]="isChecked" দ্বারা টগলের মানের (checked/unchecked) ট্র্যাকিং করা হচ্ছে। যখন টগল সুইচ করা হবে, তখন isChecked ভেরিয়েবলের মান আপডেট হবে।

MatSlideToggle এর কাস্টমাইজেশন

১. ডিফল্ট চেকড স্টেট

আপনি যদি ডিফল্টভাবে টগল সুইচটিকে চেকড করতে চান, তবে checked অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-slide-toggle checked>Toggle Option</mat-slide-toggle>

এখানে, টগল সুইচ ডিফল্টভাবে চেকড অবস্থায় থাকবে।

২. টগল টেক্সট কাস্টমাইজেশন

MatSlideToggle এর টেক্সট এবং লেবেল কাস্টমাইজ করা সম্ভব। আপনি টেক্সট পরিবর্তন করতে পারেন এবং প্রয়োজন অনুযায়ী আরো স্টাইল যোগ করতে পারেন।

<mat-slide-toggle [(ngModel)]="isChecked">Enable Feature</mat-slide-toggle>

এখানে, টগল সুইচে "Enable Feature" লেখা প্রদর্শিত হবে।

৩. স্টাইলিং

Angular Material স্লাইড টগল কম্পোনেন্টটি কাস্টম স্টাইল দিয়ে সুন্দরভাবে সাজানো যায়। আপনি CSS বা SCSS ব্যবহার করে টগলের রঙ, আকার এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

.mat-slide-toggle .mat-slide-toggle-bar {
  background-color: #ff4081;
}

.mat-slide-toggle-checked .mat-slide-toggle-bar {
  background-color: #4caf50;
}

এখানে, টগল সুইচের unchecked অবস্থায় পিঙ্ক রঙ এবং checked অবস্থায় সবুজ রঙ প্রদর্শিত হবে।

৪. ডিসেবল (Disable) করা

যদি আপনি টগল সুইচটিকে নিষ্ক্রিয় করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে হবে।

<mat-slide-toggle disabled>Disabled Toggle</mat-slide-toggle>

এখানে, "Disabled Toggle" টগল সুইচ নিষ্ক্রিয় থাকবে এবং ব্যবহারকারী এটি ইন্টারঅ্যাক্ট করতে পারবে না।

৫. Change ইভেন্ট হ্যান্ডলার

আপনি (change) ইভেন্ট ব্যবহার করে টগল সুইচ পরিবর্তন হওয়ার সাথে সাথে একটি ফাংশন বা লজিক চালাতে পারেন।

<mat-slide-toggle [(ngModel)]="isChecked" (change)="onToggleChange($event)">Enable Notifications</mat-slide-toggle>

onToggleChange(event) {
  console.log('Toggle value changed:', event.checked);
}

এখানে, onToggleChange() ফাংশনটি কল হবে যখন টগল সুইচ পরিবর্তিত হবে এবং টগল এর মান event.checked এর মাধ্যমে পাওয়া যাবে।

MatSlideToggle এর বৈশিষ্ট্য

• Easy to Use: mat-slide-toggle ব্যবহার করা খুবই সহজ এবং এটি Material Design এর একটি অংশ, তাই এটি অ্যাপ্লিকেশনে সুন্দর এবং একীভূত ডিজাইন প্রদান করে।
• Two-State (Checked/Unchecked): এটি একটি দুটি স্টেটের টগল সুইচ, যা সাধারণত বাইনরি ফাংশনালিটি (যেমন: চালু/বন্ধ) প্রদানে ব্যবহৃত হয়।
• Reactive: Angular এর ngModel এর মাধ্যমে টগল সুইচের মান অ্যাক্সেস করা যায় এবং তা পরিবর্তন হলে সংশ্লিষ্ট কোডে প্রভাব ফেলে।
• Customizable: CSS বা SCSS ব্যবহার করে টগল সুইচের স্টাইল, রঙ, আকার এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করা যায়।

উপসংহার

Angular Material MatSlideToggle একটি সহজ এবং কার্যকরী কম্পোনেন্ট যা Material Design এর আদর্শ অনুসরণ করে। এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ইন্টারেক্টিভ টগল সুইচ প্রদান করে, যা চালু/বন্ধ বা অথরাইজেশন স্টেট পরিবর্তন সহ বিভিন্ন কাজে ব্যবহৃত হতে পারে। Angular Material এর স্লাইড টগল কম্পোনেন্ট কাস্টমাইজ, স্টাইল এবং ইভেন্ট হ্যান্ডলিং এর মাধ্যমে অত্যন্ত শক্তিশালী এবং ফ্লেক্সিবল হয়ে ওঠে।

Angular Material এর MatSlideToggle কম্পোনেন্টটি একটি স্লাইড টগল সুইচ তৈরি করার জন্য ব্যবহৃত হয়, যা সাধারণত দুটি অবস্থা (যেমন, চালু বা বন্ধ, সক্ষম বা অক্ষম) সুইচ করার জন্য ব্যবহৃত হয়। এটি একটি খুব সাধারণ ইউআই উপাদান যা ব্যবহারকারীকে একটি অপশন সক্রিয় বা নিষ্ক্রিয় করতে সক্ষম করে, সাধারণত বাইনারি সিদ্ধান্ত (যেমন: Yes/No, On/Off) নিতে।

এটি সহজেই ব্যবহারযোগ্য এবং স্টাইলিশ, এবং আপনি Angular Material এর সাহায্যে দ্রুত স্লাইড টগল তৈরি করতে পারবেন।

MatSlideToggle ব্যবহার করা

১. Angular Material ইন্সটল করা

প্রথমে, আপনার Angular অ্যাপ্লিকেশনে Angular Material ইন্সটল করতে হবে। এটি যদি আগে থেকেই ইন্সটল না করা থাকে, তবে নিচের কমান্ডটি ব্যবহার করে ইন্সটল করুন:

npm install @angular/material

২. MatSlideToggleModule ইমপোর্ট করা

এখন আপনাকে MatSlideToggleModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে:

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatSlideToggleModule,
    MatFormFieldModule
  ]
})
export class AppModule {}

৩. HTML কোডে MatSlideToggle ব্যবহার করা

এখন আপনি mat-slide-toggle ট্যাগ ব্যবহার করে স্লাইড টগল সুইচ তৈরি করতে পারেন।

<mat-slide-toggle>Enable Feature</mat-slide-toggle>

এটি একটি সাধারণ টগল সুইচ তৈরি করবে, যেটি "Enable Feature" নামে লেবেল থাকবে। ব্যবহারকারী এটি টগল করতে পারবেন।

MatSlideToggle কাস্টমাইজেশন

১. ডিফল্ট অবস্থান এবং ভ্যালু

আপনি checked অ্যাট্রিবিউট ব্যবহার করে টগল সুইচের ডিফল্ট অবস্থান সেট করতে পারেন (যেমন, সুইচটি চালু বা বন্ধ):

<mat-slide-toggle [checked]="isChecked">Enable Feature</mat-slide-toggle>

এখন, আপনি isChecked ভ্যারিয়েবলটি true বা false দিয়ে নিয়ন্ত্রণ করতে পারেন।

export class AppComponent {
  isChecked = true;  // সুইচটি ডিফল্টভাবে চালু থাকবে
}

২. ব্যবহারকারীর অ্যাকশন ট্র্যাক করা

আপনি (change) ইভেন্ট লিসেনার ব্যবহার করে স্লাইড টগল সুইচের অবস্থান পরিবর্তন ট্র্যাক করতে পারেন:

<mat-slide-toggle [(ngModel)]="isChecked" (change)="onToggleChange($event)">
  Enable Feature
</mat-slide-toggle>

export class AppComponent {
  isChecked = false;

  onToggleChange(event: any) {
    console.log('Toggle Changed:', event.checked);
  }
}

এখানে, (change) ইভেন্ট ব্যবহার করে আপনি টগল সুইচের অবস্থা পরিবর্তনের সময় event.checked দ্বারা নতুন অবস্থা (true/false) পাচ্ছেন।

৩. MatSlideToggle এর লেবেল কাস্টমাইজ করা

mat-slide-toggle এর মধ্যে আপনি কাস্টম লেবেল ব্যবহার করতে পারেন, যেমন "On" এবং "Off" বা অন্য যেকোনো টেক্সট:

<mat-slide-toggle [checked]="isChecked">
  {{ isChecked ? 'On' : 'Off' }}
</mat-slide-toggle>

এটি টগল সুইচের অবস্থান অনুযায়ী "On" বা "Off" টেক্সট প্রদর্শন করবে।

৪. ডিসেবল করা

আপনি [disabled] অ্যাট্রিবিউট ব্যবহার করে স্লাইড টগলকে অক্ষম (disabled) করতে পারেন:

<mat-slide-toggle [disabled]="isDisabled">Enable Feature</mat-slide-toggle>

export class AppComponent {
  isDisabled = true;  // টগল সুইচটি ডিফল্টভাবে নিষ্ক্রিয় থাকবে
}

এখানে isDisabled ভ্যারিয়েবলটি true হলে টগল সুইচটি অক্ষম হয়ে যাবে।

Styling MatSlideToggle

MatSlideToggle এর স্টাইল কাস্টমাইজ করতে Angular Material এর mat-slide-toggle ক্লাসের মাধ্যমে আপনি CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি টগল সুইচের রঙ পরিবর্তন করতে পারেন:

mat-slide-toggle {
  color: #FF5722;  /* টগল সুইচের রঙ পরিবর্তন */
}

এছাড়া, আপনি mat-slide-toggle এর থিম এবং আউটপুট রঙ কাস্টমাইজ করতে পারেন এবং mat-toggle এর অবস্থান অনুযায়ী অ্যানিমেশন যোগ করতে পারেন।

Angular Material এর MatSlideToggle একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য কম্পোনেন্ট, যা ব্যবহারকারীদের বিভিন্ন অপশন সুইচ করার জন্য সহজ এবং আকর্ষণীয় উপায় প্রদান করে। এটি বিভিন্ন ধরনের পরিস্থিতিতে, যেমন ফিচার একটিভেশন বা ডিসএ্যাকটিভেশন, সিস্টেম সেটিংস কন্ট্রোল ইত্যাদিতে কার্যকরভাবে ব্যবহার করা যায়। ngModel, (change), এবং অন্যান্য অ্যাট্রিবিউটের মাধ্যমে আপনি ব্যবহারকারীর অ্যাকশন ট্র্যাক করতে পারেন এবং অ্যাপ্লিকেশনের মধ্যে ডাইনামিক ফিচার পরিবর্তন করতে পারেন।